<template>
  <div class="box">
    <div class="logo">
      <h1>Vue Editor</h1>
    </div>
    <div class="btns">
      <svg-icon icon-class="desktop" @click="view('pc')"  />
      <svg-icon icon-class="mobile" @click="view('mobile')"  />

      <el-select v-model="platform" placeholder="请选择" class="selectPlatform">
        <el-option label="PC" value="editor"></el-option>
        <el-option label="M" value="editorM"></el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
export default {
    name: 'EditorHeader',
    props: {
        value: {
            type: Number,
            default: 60
        },
        minScale: {
            type: Number,
            default: 40
        },
        stepNum: {
            type: Number,
            default: 5
        }
    },
    data () {
        return {
            style: {}
        };
    },
    computed: {
        platform: {
            get () {
                return this.$route.name;
            },
            set (routerName) {
                console.log(routerName);
                // this.$router.replace({
                //     name: routerName
                // });
            }
        },
        disabledMinus () {
            return this.value <= this.minScale;
        },
        disabledPlus () {
            return this.value >= 100;
        }
    },
    methods: {
        view (name) {}
    }
};
</script>

<style lang="scss" scoped>
@import "_common/css/variable";
.box {
  padding: 20px 80px;
  height: auto;
  background: $colorWhite;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
}
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 0 40px #409EFF;
  h1 {
    font-size: 30px;
    text-transform: uppercase;
  }
}
.selectPlatform {
  width: 100px;
  margin-right: 20px;
}
</style>
